<template>
	<gracePage>
		<!-- 页面主体 -->
		<view slot="gHeader" class="grace-border-b">
			<view class="grace-header-body">
				<view style="background:#EB5D4B;padding: 10rpx 0;width: 100%;" class="grace-flex grace-rows grace-flex-vcenter">
					<view class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap="goback"></view>
					<graceSearch @inputting="inputting" @confirm="confirm"></graceSearch>
					<button @click="confirm" type="default" class="grace-button" style="white-space: nowrap;margin-left: 20rpx;width: 100rpx;margin-right:20rpx;background-color:#EB5D4B;color: #FFFFFF;">搜索</button>
				</view>
			</view>
		</view>
		<view slot="gBody">
			<graceEmptyNew v-if="goods.length==0">
				<view slot="img" class="empty-view">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
				</view>
				<text slot="text" class="grace-text-small grace-gray">抱歉，没有搜索到任何数据</text>
			</graceEmptyNew>
			<!-- 搜索组件宽度自适应于外层 -->
			<!-- <view class="grace-body" v-if="goods.length==0">
				<view v-if="searchKeyHistory.length > 0">
					<view class="grace-title" style="margin-top:15rpx;">
						<text class="grace-title-text grace-black">搜索历史</text>
						<text class="grace-text-small grace-gray grace-icons icon-remove" @tap="removeAll">清空</text>
					</view>
					<view class="grace-search-tags grace-wrap">
						<view v-for="(item, index) in searchKeyHistory" :key="index" :data-key="item" class="grace-search-tags-items"
						 @tap="setKey">{{ item }}</view>
					</view>
				</view>
				<view class="grace-title" style="margin-top:15rpx;"><text class="grace-title-text grace-black">热门搜索</text></view>
				<view class="grace-search-tags grace-wrap">
					<view v-for="(item, index) in HotKeyHistory" :key="index" :data-key="item" class="grace-search-tags-items" @tap="setKey">{{ item }}</view>
				</view>
			</view> -->
			<view class="grace-body" v-if="goods.length > 0" style="margin-top: 30rpx;">
				<view class="grace-img-card">
					<view class="grace-img-card-item" :data-productid="index" v-for="(item, index) in goods" :key="index" @tap="openProductInfo(item.product_id)"
					 style="background-color: #FFFFFF;padding: 0 0 20rpx;margin-top: 20rpx;border-radius: 18rpx;">
						<view class="grace-img-card-img" style="width: 340rpx;height: 340rpx;">
							<image style="width: 340rpx;height: 340rpx;" :src="gRequest.apiUrlImages+item.image" mode="scaleToFill" class="grace-img-card-img"></image>
						</view>
						<text class="grace-img-card-title grace-ellipsis" style="padding: 0 20rpx;color: #666666;">{{ item.name }}</text>
						<view style="padding: 0 20rpx;">
							<text class="grace-img-card-price">￥{{ item.price }}</text>
							<text class="grace-line-through grace-text-small grace-gray">￥{{ item.special_price }}</text>
						</view>
						<view class="grace-flex grace-rows grace-space-between grace-flex-vcenter" style="padding: 0 20rpx;">
							<text class="grace-capsule-text grace-text-br" style="border-color:#D42C25; color:#E14F3D;border-radius: 8rpx;padding: 5rpx 10rpx;font-size: 24rpx;">特价</text>
							<!-- <text @click="addCart" class="iconfont icon-gouwuchezhengpin" style="font-size: 40rpx;color: #E14F3D;"></text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceSearch from '../../graceUI/components/graceSearch.vue';
	import graceEmptyNew from "../../graceUI/components/graceEmptyNew.vue";
	export default {
		data() {
			return {
				goods: [],
				searchKey: '',
				searchKeyHistory: [],
				HotKeyHistory: []
			};
		},
		onLoad: function() {},
		methods: {
			goback: function() {
				uni.navigateBack({});
			},
			inputting: function(e) {
				this.searchKey = e
			},
			confirm: function(e) {
				this.gRequest.get(
					'/product/getkeywordproducts', {
						keyword: this.searchKey
					},
					res => {
						this.setData({
							goods: res.data
						});
					}
				);
			},
			setKey: function(e) {
				var key = e.currentTarget.dataset.key;
				uni.showToast({
					title: '开始搜索 ' + key,
					icon: 'none'
				});
				this.searchKey = key;
			},
			removeAll: function() {
				this.searchKeyHistory = [];
			},
			// 打开商品详情
			openProductInfo: function(e) {
				uni.navigateTo({
					url: '../productInfo/productInfo?product_id=' + e
				});
				// uni.navigateTo({ url: '../pointsMall/pointMallProductInfo?product_id='+e });
			}
		},
		components: {
			gracePage,
			graceSearch,
			graceEmptyNew
		}
	};
</script>
<style>
	page {
		background-color: #f8f8f8;
	}

	.grace-search-tags {
		padding: 10rpx 0;
	}

	.grace-search-tags-items {
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		border-width: 1px;
		border-style: solid;
		background-color: #FFFFFF;
		border-color: #F1F1F1;
		color: #a5a7b2;
		font-size: 26rpx;
	}
</style>
